<template>
	<view class="registerpages" :style="{height: scrollHeight+'px'}">
		<common :tips='commonTips'></common>
		<u-modal v-model="modelShow" :content="modelContent"></u-modal>
		<!-- <view class="login-bg"></view> -->
		<view class="register-box">
			<view class="regsex">
				<view @tap="choice_sex(1)" class="regsex_box">
					<image class="regimg" :src="photo_cdn + 'zpupload/static/tablet/boy_alive.png'"></image>
					<view class="sex_txt">男</view>
					<view class="circles">
						<view class="regdot" :class="{active:form.sex==1}" ></view>
					</view>
				</view>
			
				<view @tap="choice_sex(2)" class="regsex_box">
					<image class="regimg" :src="photo_cdn + 'zpupload/static/tablet/girl_alive.png'"></image>
					<view class="sex_txt">女</view>
					<view class="circles">
						<view class="regdot" :class="{active:form.sex==2}" ></view>
					</view>
				</view>
			</view>			
			<u-form :model="form" class="login-form" label-width="150" :label-style="{textAlign: 'justify', textAlignLast: 'justify', display: 'inline-block', paddingRight:'10px'}" ref="uForm">
				<u-form-item prop="username">
					<view class="logform" >
						<u-input v-model="form.username" placeholder="请输入用户名" name="username" />
					</view>
				</u-form-item>
				<u-form-item prop="password">
					<view class="logform" >
						<u-input v-model="form.password" :password-icon="true" placeholder="请输入密码" type="password" name="password" />
					</view>
				</u-form-item>
				<u-form-item prop="rePassword">
					<view class="logform" >
						<u-input v-model="form.rePassword" :password-icon="true" placeholder="请输入确认密码" type="password" name="rePassword" />
					</view>
				</u-form-item>
				
					
				<!-- <u-form-item label="选择性别" prop="sex">
					<u-input @tap="selectsex" disabled="" v-model="sex_text" placeholder="选择性别" name="sex" />
				</u-form-item> -->

				
				<u-form-item  prop="mobile">
					<view class="logform">
						<u-input v-model="form.mobile" placeholder="请输入手机号" type="number" name="mobile" />
					</view>
				</u-form-item>
				<u-form-item  prop="captcha">
					<view class="flex">
						<view class="logform_a">
							<u-input placeholder="请输入验证码" v-model="form.captcha" type="text"></u-input>
						</view>
						<!-- <u-button class="sendcodebtn" slot="right" type="primary" size="mini" @click="getCode">{{codeTips}}</u-button> -->
						<view class="sendcodebtn" @click="getCode">{{codeTips}}</view>
					</view>					
				</u-form-item>
				
				<view class="logreg">
					<button :disabled="registerFormButtonDisabled" class="regbtn" @click="submit">注册</button>
					<button class="rebtn" @click="goLogin">返回登录</button>
					<!-- <u-button :custom-style="registerFormButtonStyle" :ripple="true" :disabled="registerFormButtonDisabled" ripple-bg-color="rgba(192,46,54, 0.8)" @click="submit">注册</u-button> -->
					<!-- <u-button :custom-style="registerButtonStyle" :ripple="true" :disabled="registerFormButtonDisabled" ripple-bg-color="rgba(192,46,54, 0.8)" @click="goLogin">返回登录</u-button> -->
				</view>
								
				<u-verification-code seconds="60" ref="uCode" @change="codeChange"></u-verification-code>
				
				
			</u-form>
			
			<view class="accordtag">
				<view class="radioview">
					<radio @tap="radioChange" :checked="isAgree" :color="$themecolor" />注册代表同意
					<text @tap="totreaty" class="atag">《用户协议》</text>
					<text @tap="toprivacy" class="atag">《隐私政策》</text>
					并授权使用您的账号信息（如手机号、昵称、头像）以便您统一管理
				</view>
			</view>
			
			<!-- <view class="login-footer-box">
				<view @click="goLogin" class="login-footer-box-left">返回登录</view>
			</view> -->
		</view>
		
		<privacypopup ref="privacypopup"></privacypopup>
		<!-- 小程序隐私弹窗 -->
	</view>
</template>

<script>
	import config from "@/utils/config.js";
	let {
		photo_cdn
	} = config.baseUrl;
	import {
		mapMutations
	} from "vuex"
	import privacypopup from "@/components/privacypopup/privacypopup.vue";
	import {familyList} from "@/utils/api/zupu.js";
	export default {
		components:{
			privacypopup,
		},
		data() {
			return {
				isAgree:false,
				photo_cdn,
				family_id:'',
				form: {
					username: '',//用户名
					mobile: '',//手机
					password: '',//密码
					rePassword: '',//确定密码
					sex:"",//性别
				},
				rules: {
					mobile: [
						{
							required: true, 
							message: '请输入手机号',
							trigger: ['change', 'blur']
						},
						{
							validator: (rule, value, callback) => {
								return this.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							trigger: ['blur'],
						}
					],
					username: [
						{
							required: true, 
							message: '请输入账号',
							trigger: ['change', 'blur']
						}
					],
					password: [
						{
							required: true,
							min: 6, 
							message: '请输入正确的密码', 
							trigger: 'blur'
						}
					],
					rePassword: [
						{
							required: true,
							message: '请重新输入密码',
							trigger: ['change','blur'],
						},
						{
							validator: (rule, value, callback) => {
								return value === this.form.password;
							},
							message: '两次输入的密码不相等',
							trigger: ['change','blur'],
						}
					],
					
				},
				registerFormButtonStyle: {
					// backgroundImage: `linear-gradient(to bottom right, ${this.$themecolor}, ${this.$themecolor}`,
					border: 'none',
					color: '#ffffff',
					outline: 'none',
					marginTop: '30rpx',
					height: '90rpx',
					width:'230rpx',
					borderRadius:'18rpx',
					backgroundColor:'red'
				},
				registerButtonStyle:{
					backgroundImage: `linear-gradient(to bottom right, #02A1FF, #02A1FF`,
					border: 'none',
					color: '#ffffff',
					outline: 'none',
					marginTop: '30rpx',
					height: '90rpx',
					width:'230rpx',
					borderRadius:'18rpx'
				},
				registerFormButtonDisabled: false,
				modelShow: false,
				modelContent: '',
				codeTips: '获取验证码',
				commonTips: '',
				scrollHeight:0,
				
				sex_text:"",
			}
		},
		onShow() {
			this.computeheight();

		},
		methods: {
			...mapMutations(['updatebaseItem']),
			computeheight() {
				let resinfo = uni.getSystemInfoSync();
				let windowHeight = resinfo.windowHeight;
				this.scrollHeight = windowHeight;
			},
			//单选框
			radioChange(e){
				this.isAgree = !this.isAgree;
			},
			//用户协议
			totreaty(){
				uni.navigateTo({
					url:"/pages/mine/agreement/agreementuser"
				})
			},
			//隐私政策
			toprivacy(){
				uni.navigateTo({
					url:"/pages/mine/agreement/agreement"
				})
			},
			getCode: function () {
				var that = this
				if (!that.form.mobile) {
					that.$u.toast('请输入手机号');
					return ;
				}
				if(that.$refs.uCode.canGetCode) {
					uni.showLoading({
						title: '正在获取验证码',
						mask: true
					});
					that.$u.post('/api/sms/send', {
						event: 'register',
						mobile: that.form.mobile
					}).then(res => {
						if (res.code == 1) {
							uni.hideLoading();
							that.$u.toast('验证码已发送');
							that.$refs.uCode.start();
						} else {
							that.modelContent = res.msg
							that.modelShow = true
						}
					}).catch(res => {
						that.$u.toast('请求失败，请重试！');
					})
				} else {
					that.$u.toast('倒计时结束后再发送');
				}
			},
			codeChange(text) {
				this.codeTips = text;
			},
			goLogin: function() {
				uni.redirectTo({
					url: '/pagesim/center/login'
				})
			},
			submit: function(e) {
				if(!this.isAgree){
					this.$u.toast('请同意并阅读协议.');
					return false;
				}
				
				var that = this
				that.$refs.uForm.validate(valid => {
					if (valid) {
						that.registerFormButtonDisabled = true
						
						
						
						if(!this.form.sex){
							this.$u.toast('请选择性别');
							return false;
						}
						
						that.$u.post('/addons/fastim/api.user/register', that.form).then(res => {
							that.registerFormButtonDisabled = false
							if (res.code == 1) {
								
								uni.setStorageSync('u_userInfo', res.data.userinfo);
								uni.setStorageSync('userinfo', res.data.userinfo);
								
								uni.setStorageSync('token', res.data.userinfo.user_token);
								that.ws.init(res.data.userinfo.token, res.data.userinfo.auth_token)
								// uni.switchTab({
								// 	url: '/pages/message/message'
								// })
								
								// #ifdef MP-WEIXIN
								//获取微信授权的code
								this.$refs.privacypopup.tabBarPageShow()
								that.$getweixin().then(()=>{
									this.updatebaseItem({
										key:'isinit',
										val:1,
									})
									
									// uni.switchTab({
									// 	url: '/pages/index/index'
									// })
									this.FamilyListfun();
									setTimeout(()=>{
										uni.redirectTo({
											url:`/pages/zupu/familytrees/familytrees?family_id=${this.family_id}`
										})
									},1000)
								})
								// #endif
								
								// this.$store.commit("setinit",1);
								
								// #ifndef MP-WEIXIN
								this.updatebaseItem({
									key:'isinit',
									val:1,
								})
								
								// uni.switchTab({
								// 	url: '/pages/index/index'
								// })
								this.FamilyListfun();
								setTimeout(()=>{
									uni.redirectTo({
										url:`/pages/zupu/familytrees/familytrees?family_id=${this.family_id}`
									})
								},1000)
								// #endif
								
								
								// uni.setStorageSync('userinfo', res.data.userinfo);
								// that.ws.init(res.data.userinfo.token, res.data.userinfo.auth_token)
								// uni.switchTab({
								// 	url: '/pages/message/message'
								// })
								
								// uni.switchTab({
								// 	url: '/pages/index/index'
								// })
							} else {
								that.modelContent = res.msg
								that.modelShow = true
							}
						}).catch(res => {
							comsole.info('res',res);
							that.registerFormButtonDisabled = false
							that.$u.toast('请求失败，请重试！');
						})
					}
				});
			},
			onReady() {
				this.$refs.uForm.setRules(this.rules);
			},
			//选择性别
			selectsex(){
				uni.showActionSheet({
					itemList: ['男','女','未知'],
					success:  (res)=> {
						if(res.tapIndex==0){
							this.form.sex = 1;
							this.sex_text = "男";
						}else if(res.tapIndex==1){
							this.form.sex = 2;
							this.sex_text = "女";
						}else if(res.tapIndex==2){
							this.form.sex = 0;
							this.sex_text = "未知";
						}
					},
					fail:  (res)=> {
						console.log(res.errMsg);
					}
				});	
			},
			FamilyListfun(){
				familyList({
					source:0
				}).then(res=>{
					if(res.code==1){
						this.family_id = res.data[0].id;
					}
				})
			},	
			choice_sex(index){
				if(this.form.sex==index){
					return false;
				}
				this.form.sex = index;
			}
		}
	}
</script>

<style lang="scss">
page {
	background-color: #F7F7F7;
}
.logform{
	width: 526rpx;
	padding: 4rpx 20rpx;
	border-radius: 18rpx;
	margin: 0 auto;
	background-color: #FFFFFF;
}
.surinput{
	padding: 10rpx;
}
.logform_a{
	width: 300rpx;
	padding: 4rpx 0 4rpx 20rpx;
	border-radius: 18rpx;
	background-color: #FFFFFF;
}
.registerpages{
	background-repeat: no-repeat;
	background-size: cover;
}
.login-bg {
	width: 100vw;
	height: 400rpx;
}
.login-form {
	display: block;
	width: 78vw;
	// padding-top: 40rpx;
	margin: 0 auto;
}
.login-footer-box {
	display: flex;
	padding-top: 30rpx;
	width: 78vw;
	margin: 0 auto;
}
.login-footer-box-left {
	text-decoration: underline;
	font-size: 28rpx;
	color: $themecolor;
}
.register-box {
	// background-color: $--white;
	position: relative;
	// top: -200rpx;
	left: 5vw;
	width: 90vw;
	border-radius: 16rpx;
	padding-bottom: 60rpx;
	// box-shadow: 0 0 10px rgba(0, 0, 0, .2);
}
.accordtag{
	padding: 0 20rpx;
}
.radioview{
	display: block; //转换为块状元素
	margin-top: 38rpx; //
}
.atag{
	text-decoration:none; //去下划线
	color: #B13B3B;
	size: 28rpx;
}
.clonepushbtn{
	text-align: center;
	margin-top: 10upx;
}
.sendcodebtn{
	min-width: 180rpx;
	padding: 4rpx 10rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #FFFFFF;
	font-size: 28rpx;
	background-color: #B13B3B;
	margin-left: 46rpx;
	border-radius: 12rpx;
}
.logreg{
	width: 588rpx;
	display: flex;
	margin: 0 auto;
	justify-content: space-between;
	align-items: center;
	margin-top: 30rpx;
	// margin-left: 10rpx;
	.regbtn{
		background-color: #B13B3B;
		width: 230rpx;
		border-radius: 72rpx;
		height: 90rpx;
		color: #FFFFFF;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.rebtn{
		background-color: #B13B3B;
		width: 230rpx;
		border-radius: 72rpx;
		height: 90rpx;
		color: #FFFFFF;
		display: flex;
		justify-content: center;
		align-items: center;
	}
}
.regsex{
	display: flex;
	justify-content: center;
	margin-top: 40rpx;
	.regsex_box{
		width: 220rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin: 30rpx 0 20rpx 0;
		.sex_txt{
			font-size: 30rpx;
			color: #BCBCBC;
			margin: 20rpx 0;
		}
		.regimg{
			width: 122rpx;
			height: 122rpx;
			border-radius: 50%;			
		}
		.circles{
			width: 15px;
			height: 15px;
			display: flex;
			justify-content: center;
			align-items: center;
			border: 2rpx solid #02A1FF;
			border-radius: 50%;
			.regdot{
				width: 5px;
				height: 5px;
				background: #F7F7F7;
				border-radius: 50%;
			}
			.regdot.active{
				width: 10rpx;
				height: 10rpx;
				background: #02A1FF;
				border-radius: 50%;
			}
		}
	}
}
</style>
